<!-- 收款生产板块柱状图 -->
<template>
  <div id="sk-business-bar" style="width: 100%; height: 100%;"></div>
</template>

<script setup>
import { onMounted, reactive, watch } from "vue";
import * as echarts from "echarts";

const props = defineProps({ data: { type: Array, default: () => [] } });
const option = reactive({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross'
    }
  },
  grid: {
    top: '20%',
    bottom: '15%'
  },
  xAxis: {
    type: 'category',
    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  yAxis: {
    name: '万元',
    type: 'value',
    axisLabel: {
      formatter: '{value}'
    }
  },
  series: [
    {
      data: [],
      tooltip: {
        valueFormatter: function (value) {
          return value + ' 万元';
        }
      },
      type: 'bar'
    }
  ]
});

let mychart = null;

watch(() => props, () => {
  option.series[0].data = props.data;
  mychart.setOption(option);
}, { deep: true });

onMounted(() => {
  mychart = echarts.init(document.getElementById('sk-business-bar'));
  mychart.setOption(option);
});
</script>

<style scoped></style>
